<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title> jQuery </title>
</head>
<body>
    <button>登录</button>
    <span>文本1</span>
    <span>文本2</span>
    <span>文本3</span>
    
</body>
<script src="../lib/jquery.min.js"></script>
<script>
    //jQuery 有一个别名 $，二者是完全等价的，可以互相替换
    $(function(){
        //原生的DOM对象
        let btn = document.querySelector('button');
        console.log(btn);
        // jQuery 对象
        //jQuery 对象是一个伪数组，其中的元素就是DOM对象
        let btn2 = $(btn);
        console.log(btn2);

       
        console.log(btn2[0] == btn);

        // let spanList = $('span');
        // console.log(spanList);

        // let third= $(spanList[2]);
        // console.log(third);

        //隐式迭代
        //$('span').css('color','red');

        // 链式编程
        $('span').css('color','red') 
                 .css('font-size','30px');




        
        
        
        
    });
</script>
</html>